<template>
    <div class="personinfomation">
        <el-backtop :bottom="100">
            <div class="navigation_up" 
            >
            UP
            </div>
        </el-backtop>
        <dailog
            v-if="dailogValue"
            @sentDailogValue="handleDailogClose"
        />          
        <div class="navigation">
            <!-- 最顶部 -->
            <div class="header1">
                <div class="header1_left">
                    <div class="app_link">
                        <img src="../assets/41.png" height="15px" style="margin-right: 5px;">
                        <a href="">拉钩APP</a>
                    </div>
                    <div class="company_link">
                        <a href="" style="color: rgba(255, 255, 255, 0.5);">进入企业版</a>
                    </div>
                </div>               
                <div class="header1_right">
                    <div class="text_space"><el-button type="text" @click="jumpPut">消息</el-button></div>
                    <div class="text_space"><el-button type="text" @click.native="jumpPersonInfomation">我的简历</el-button></div>
                    <div class="text_space"><el-button type="text" @click.native="jumpdropInBox">投递箱</el-button></div>
                    <div class="text_space"><el-button type="text">收藏夹</el-button></div>
                    <!-- 下拉列表 -->
                    <div class="text_space1"><el-button type="text">{{ user.name }}</el-button>
                        <el-row class="block-col-2">
                            <el-col :span="4">
                                <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    <i class="el-icon-caret-bottom el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-s-custom" @click.native="switchAccount">切换账号</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <!-- 模块跳转导航栏 -->
            <div class="header2">
                <div class="logo_box">
                    <img src="../assets/logo(green).png" height="34px">
                </div>
                <div class="navigation_right">
                    <div><router-link to="/home" class="space1">首页</router-link></div>
                    <div><router-link to="" class="space1">公司</router-link></div>
                    <div><router-link to="" class="space1">校园</router-link></div>
                    <div><router-link to="" class="space1">言职</router-link></div>
                </div>
            </div>
        </div>
        <!-- 子路由页面 -->
         <div>
            <router-view/>          
         </div>
        <!-- 底部导航栏 -->
        <div class="foot_content">
            <div class="content_fl000">
                <!-- 下载软件链接 -->
                <div class="link_l001">
                    <div class="button_f1002">
                        <button class="button_f1003">
                            <img src="../assets/73.svg" class="image_fl1005">
                            下载拉钩APP
                        </button>
                    </div>
                    <div class="button_f1002">
                        <button class="button_f1003">
                            <img src="../assets/130.svg" class="image_fl1004">
                            微信小程序
                        </button>
                    </div>
                    <div class="text_fl1005">
                        <div class="text_f1006">
                            <img src="../assets/wechat.png" class="image_fl1006">
                            <a href="" class="a_linkf1007">拉钩微信</a>
                        </div>
                        <div class="text_f1006">
                            <img src="../assets/sina.png" class="image_fl1006">
                            <a href="" class="a_linkf1007">拉钩微博</a>
                        </div>
                    </div>
                </div>
                <!-- 企业服务 -->
                <div class="text_fl1008">
                    <div class="text_fl1009"><strong>企业服务</strong></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">招聘强人宝典</router-link></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">公司搜索</router-link></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">拉钩APP</router-link></div>
                </div>
                <!-- 用户帮助 -->
                <div class="text_fl1008">
                    <div class="text_fl1009"><strong>用户帮助</strong></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">帮助中心</router-link></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">用户服务协议</router-link></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">隐私政策</router-link></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">在线提问</router-link></div>
                </div>
                <!-- 用户帮助 -->
                <div class="text_fl1008">
                    <div class="text_fl1009"><strong>联系方式</strong></div>
                    <div class="text_fl1011"><span  class="text_fl1010">服务热线：4006  2828  35  (9:00-18:00)</span></div>
                    <div class="text_fl1011"><span class="text_fl1010">企业服务邮箱：cc@langou.com</span></div>
                    <div class="text_fl1011"><router-link  class="text_fl1010" to="">联系我们</router-link></div>
                </div>
            </div>
            <!-- 版权信息 -->
            <div class="content_f2000">
                <div class="text_f2001">
                    <span>©2018 拉勾网 京ICP备14023790号-2</span>
                </div>
                <div class="text_f2002">
                    <img src="../assets/148.svg" class="image_f12001">
                    <span>京公网安备 11010802024043号</span>
                </div>
                <div class="text_f2003">
                    <img src="../assets/147.svg" class="image_f12002">
                    <div class="text_f2005">
                        <span>违法和不良信息举报</span>
                        <span>电话：4006 2828 35</span>
                        <span>邮箱：cc@lagou.com</span>
                    </div>
                </div>
                <div class="text_f2004">
                    <img src="../assets/149.png" class="image_f12003">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"
import Dailog from "@/components/Dailog.vue" 
import { mapState } from "vuex"

export default{
components:{  Dailog  },
    name: 'PersonInfomation',
    computed:{
        ...mapState(['user'])
    },
    data(){
        return{
            message:{
                name: '李小锅',
            },
            educationContent:{
                text:"本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。学习刻苦认真，成绩优秀，名列前茅。品学兼优，连续三年获得学院奖学金。",
            },
            dailogValue: false,
        }
    },
    methods:{
        switchAccount(){
            this.$router.push('/login')
        },
        logout(){
            this.$store.dispatch('clearMessage')
            this.$router.push('/')
        },
        jumpdropInBox(){
            this.$router.push('/dropinbox')
        },
        jumpPersonInfomation(){
            this.$router.push('/personinfomation')
        },
        handleDailogClose(){
        this.dailogValue = false
        },
        jumpPut(){
        this.dailogValue = true
        }

    }

}
</script>

<style scoped>

    .personinfomation{
        position: relative;
    }

    .navigation_up{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: rgba(0, 179, 138, 1);
    }

    .navigation{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .header1{
        font-size: 13px;
        height: 33px;
        display: flex;
        width: 100%;
        background-color: rgba(50, 50, 50, 1);
    }

    .header2{
        height: 56px;
        background-color: rgba(250, 250, 250, 1);
        box-shadow: 0px 1px 0px 0px rgba(210, 210, 210, 1);
        display: flex;
        align-items: center;
    }

    .logo_box{
        margin-left: 220px;
    }

    .header1_left{
        margin-left: 50px;
        width: 200px;
        padding: 7px;
        display: flex;
        justify-content: center;
    }

    .app_link{
        display: flex;
        align-items: center;
        color: rgba(0, 179, 138, 1);
    }

    .company_link{
        margin-left: 20px;
        padding-left: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        color: rgba(0, 179, 138, 1);
    }

    a{
        text-decoration: none;
        color: rgba(0, 179, 138, 1);

    }

    .header1_right{
        margin-right: 100px;
        padding: 0px 30px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .text_space{
        margin-left: 30px;
    }

    .text_space1{
        margin-left: 30px;
        display: flex;
        align-items: center;
    }
    
    .el-button--text{
        color: rgba(255, 255, 255, 0.5);
    }


    .el-dropdown-link {
        cursor: pointer;
        color: rgba(255, 255, 255, 1);
    }

    .space1{
        margin-left: 40px;
        padding-bottom: 3px;
        color: rgba(128, 128, 128, 1);
    }

    .space1:hover{
        border-bottom: rgba(0, 179, 138, 1) solid 3px; 
        font-weight: bold;
        color: rgba(0, 179, 138, 1);
    }

    .navigation_right{
        margin-left: 230px;
        display: flex;
    }

    .foot_content{
        padding-top: 50px;
        border-top: rgba(229, 229, 229, 1) solid 1px;
    }

    .content_fl000{
        display: flex;
    }

    .link_l001{
        padding: 0px 100px;
        height: 180px;
        text-align: center;
        border-right: rgba(210, 210, 210, 1) solid 1px;
    }

    .button_f1002{
        margin-bottom: 16px;
    }

    .button_f1003{
        padding: 8px 30px;
        width: 100%;
        font-size: 14px;
        color: rgba(0, 179, 138, 1);
        border-radius: 4px;
        background-color: white;
        border: rgba(0, 179, 138, 1) solid 1px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .image_fl1004{
        height: 20px;
        margin-right: 5px;
    }

    .image_fl1005{
        height: 16px;
        margin-right: 5px;
    }

    .text_fl1005{
        display: flex;
    }

    .text_f1006{
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .a_linkf1007{
        color: rgba(210, 210, 210, 1);
        font-size: 12px;;
    }

    .image_fl1006{
        height: 16px;
        margin-right: 8px;
        filter: saturate(0);
    }

    .text_fl1008{
        padding-left: 150px;
    }

    .text_fl1009{
        font-size: 18px;
        margin-bottom: 20px;
    }

    .text_fl1010{
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
    }

    .text_fl1011{
        margin-bottom: 15px;
    }
    
    .content_f2000{
        height: 100px;
        margin-top: 30px;
        font-size: 13px;
        color: rgba(166, 166, 166, 1);
        display: flex;
        align-items: center;
        background-color: rgba(250, 250, 250, 1);
    }

    .text_f2001{
        margin-left: 80px;
        margin-right: 30px;
    }

    .text_f2002{
        display: flex;
        align-items: center;
        margin-right: 40px;
    }

    .text_f2003{
        margin-right: 40px;
        padding: 8px;
        display: flex;
        align-items: center;
        border: rgba(229, 229, 229, 1) solid 1px;
    }

    .image_f12001{
        height: 18px;
    }

    .image_f12002{
        height: 28px;
        margin-right: 5px;
    }

    .image_f12003{
        height: 30px;
    }

    .text_f2004{
        flex: 1;
        text-align: right;
        margin-right: 100px;
    }

    .text_f2005{
        display: flex;
        flex-direction: column;
    }

</style>